<!DOCTYPE html>
<html>
<head>
    <title>管理员信息</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table style="margin-top: 10px;" id="user-table" lay-filter="user-table"></table>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="layui-card" >
    <div id="mark" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
</div>
<div class="layui-card" >
    <div id="mark_2" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
</div>

</body>


{# 用户注册时间 #}
<script type="text/html" id="user-createTime">
    {{ '  {{layui.util.toDateString(d.create_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

{# 用户更新时间 #}
<script type="text/html" id="user-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>


<script type="text/html" id="operate-status">
    {{ '{{#if (d.success == true) { }}
    <span style="color: green">成功</span>
    {{# }else if(d.success == false){ }}
    <span style="color: red">失败</span>
    {{# } }}'|safe }}
</script>

{% include 'admin/common/footer.html' %}
<script>
  layui.use(['table', 'form', 'jquery', 'element', 'util'], function () {
    let table = layui.table
    let form = layui.form

    let MODULE_PATH = '/admin/administrator/'

     //表格数据
    let cols = [
    [
        { title: '管理员id', field: 'id', align: 'center', width: 110 },
        { title: '姓名', field: 'name', align: 'center' },
        //{ title: '证件照', field: 'avatar', align: 'center' },
        //{ title: '部门id', field: 'dept_id', align: 'center',  width: 120 },
        { title: '负责课程名称', field: 'subject_at', align: 'center' },
        { title: '注册时间', field: 'create_at', templet: '#user-createTime', align: 'center' },
        { title: '更新时间', field: 'update_at', templet: '#user-updateTime', align: 'center' }

    ]
    ]

       //表格数据
    let cols2 = [
    [
        { title: '操作课程管理员id', field: 'operatorid', align: 'center' },
        { title: '操作课程管理员姓名', field: 'operatorname', align: 'center' },
        { title: '课程id', field: 'classid', align: 'center'  },
        { title: '课程名', field: 'classname', align: 'center'  },
        { title: '课程创建时间', field: 'create_at', templet: '#user-createTime', align: 'center' },
        { title: '课程修改时间', field: 'update_at', templet: '#user-updateTime', align: 'center' },
        { title: '操作状态',field: 'scuccs', templet: '#operate-status', align: 'center' }

    ]
    ]

    // 渲染表格数据
    table.render({
      elem: '#user-table',
      url: MODULE_PATH + 'data',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: '#dict-type-toolbar',
      defaultToolbar: [{ layEvent: 'refresh', icon: 'layui-icon-refresh' }, 'filter', 'print', 'exports'] /*默认工具栏*/
    })

    table.render({
      elem: '#info-table',
      url: MODULE_PATH + 'data2',
      page: true,
      cols: cols2,
      skin: 'line',
      toolbar: '#dict-type-toolbar',
      defaultToolbar: [{ layEvent: 'refresh', icon: 'layui-icon-refresh' }, 'filter', 'print', 'exports'] /*默认工具栏*/
    })

    form.on('submit(dict-type-query)', function (data) {
      table.reload('dict-type-table', { where: data.field })
      return false
    })


      table.on('toolbar(user-table)', function (obj) {
      if (obj.event === 'refresh') {
        window.refreshData()
      }
    })

      window.refreshType = function () {
      table.reload('user-table')
    }
        window.refreshData = function () {
      table.reload('user-table')
    }




    table.on('tool(log-login-table)', function (obj) {
      if (obj.event === 'details') {
        window.info(obj)
      }
    })

    window.info = function (obj) {
      layer.open({
        type: 2,
        title: '详细信息',
        shade: 0,
        area: ['400px', '400px'],
        content: MODULE_PATH + 'info',
        success: function (layero) {
          let iframeWin = window[layero.find('iframe')[0]['name']]
          iframeWin.show(obj.data)
        }
      })
    }
  })



layui.use(['layer', 'echarts', 'element', 'count'], function () {
var chartDom = document.getElementById('mark');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: '管理员用户对训练课程贡献分布概况'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'center',
    data: [
      '30天内课程质量评估',
      '情绪采集与评估',
      '动作规范与评估',
      '动作响应与评估',
      '攻防训练与评估',
      '管理员上线次数',
      '警员上线次数'
    ]
  },
  radar: [
    {
      indicator: [
        { text: '课程信息完整度', max: 100 },
        { text: '课程有效时间比', max: 100 },
        { text: '课程完成度', max: 100 },
        { text: '课程更新周期', max: 100 }
      ],
      center: ['25%', '40%'],
      radius: 80
    },
    {
      indicator: [
        { text: '警员配合度', max: 100 },
        { text: '警员完成度', max: 100 },
        { text: '警员参与情况', max: 100 },
        { text: '管理员参与情况', max: 100 },
        { text: '管理员投入程度', max: 100 }
      ],
      radius: 140,
      center: ['50%', '60%']
    },
    {
      indicator: (function () {
        var res = [];
        for (var i = 1; i <= 31; i++) {
            res.push({ text:  i+'日' , max: 100 });
        }
        return res;
      })(),
      center: ['75%', '40%'],
      radius: 110
    }
  ],
  series: [
    {
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      data: [
        {
          value: [60, 73, 85, 40],
          name: '30天内课程质量评估'
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      areaStyle: {},
      data: [
        {
          value: [61, 68, 59, 49, 59],
          name: '情绪采集与评估'
        },
        {
          value: [65, 60, 77, 71, 83],
          name: '动作规范与评估'
        },
        {
          value: [91, 73, 96, 63, 82],
          name: '动作响应与评估'
        },
        {
          value: [61, 79, 57, 69, 55],
          name: '攻防训练与评估'
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 2,
      areaStyle: {},
      data: [
        {
          name: '管理员上线次数',
          value: [
            10,25,35,22,50,77,57,33,35,74,56,98,55,44,33,22,78,34,23,23,64,25,21,85,36,85,73,46,45,86,13
          ]
        },
        {
          name: '警员上线次数',
          value: [
            90,78,83,63,95,47,68,96,34,57,79,25,47,84,26,59,37,48,95,26,36,62,48,27,48,27,84,37,47,48,37
          ]
        }
      ]
    }
  ]
};

option && myChart.setOption(option);
}
)






layui.use(['layer', 'echarts', 'element', 'count'], function () {
    var chartDom = document.getElementById('mark_2');
    var myChart = echarts.init(chartDom);
var option;
option = {
    title: {
    text: '各训练课程交互次数'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  series: [
    {
      name: '攻防训练课程',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },

    {
      name: '情绪采集课程',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '动作规范课程',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: '动作响应课程',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);

})



</script>
</html>